<template>
  <ManageLayout>
    <template #header-left>
      <h3>最近文件</h3>
    </template>
    <template #header-right>
      <n-button @click="handleClear" secondary>
        <TextIcon icon="maki:waste-basket" text="清空"></TextIcon>
      </n-button>
    </template>
    <div class="h-full flex flex-col">
      <n-scrollbar>
        <div class="inline-grid grid-cols-12 gap-4">
          <div v-for="(item,index) in curUserPostRecentList" :key="index"
               @contextmenu="handleContextMenu"
               @mousedown.prevent="handleMouseRightClick(item)"
               @mouseenter="showMenu=item.id"
               @mouseleave="showMenu=''"
               class="col-span-8 md:col-span-6 xl:col-span-4 2xl:col-span-3">
            <div class="flex rounded-lg border dark:border-gray-800
                     cursor-pointer hover:opacity-80 justify-between
                     transition-all duration-300 ease-in-out
                    hover:bg-gray-100 dark:hover:bg-gray-900
                    p-3 m-1 space-x-1 min-w-[250px]">
              <div>
                <RemoteImage :src="item.cover" :size="50"></RemoteImage>
              </div>
              <div class="flex-1 w-2/3">
                <h3 class="truncate">{{ item.title }}</h3>
                <div class="text-gray-500">{{ dayjs(item.operateTime).fromNow() }} |
                  <n-text :type="item.operateType==='预览'?'info':'primary'"> {{ item.operateType }}</n-text>
                </div>
              </div>
              <div class="transition-all duration-300 ease-in-out" :class="showMenu===item.id?'':'opacity-0'">
                <n-button @click="handleContextMenu" text>
                  <TextIcon icon="mdi:menu" tip="操作"></TextIcon>
                </n-button>
              </div>
            </div>
          </div>
        </div>
      </n-scrollbar>
    </div>
  </ManageLayout>

  <n-dropdown
      placement="bottom-start"
      trigger="manual"
      :x="x"
      :y="y"
      :options="options"
      :show="showDropdown"
      :on-clickoutside="onClickoutside"
      @select="handleSelect"
  />
  <PostPreviewModal ref="previewRef"></PostPreviewModal>
</template>

<script setup lang="ts">

import ManageLayout from "@/view/pc/manage/components/ManageLayout.vue";
import {storeToRefs} from "pinia";
import {useAdminStore} from "@/store/module/admin";
import RemoteImage from "@/components/common/image/RemoteImage.vue";
import {nextTick, ref} from "vue";
import PostPreviewModal from "@/components/pc/modal/PostPreviewModal.vue";
import dayjs from "@/utils/dayjs";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import router from "@/router";

const adminStore = useAdminStore()
const {curUserPostRecentList} = storeToRefs(adminStore)


const previewRef = ref()
const showDropdown = ref(false)
const showMenu = ref('')
const x = ref(0)
const y = ref(0)
const row = ref()
const options = [
  {
    label: '预览',
    key: '预览'
  },
  {
    label: '编辑',
    key: '编辑'
  },
  {
    label: '删除',
    key: '删除'
  }
]
const handleContextMenu = (e: MouseEvent) => {
  e.preventDefault()
  showDropdown.value = false
  nextTick().then(() => {
    showDropdown.value = true
    x.value = e.clientX
    y.value = e.clientY
  })
}
const handleMouseRightClick = (item: any) => {
  row.value = item
}
const onClickoutside = () => {
  showDropdown.value = false
}
const handleSelect = (key: any) => {
  if (key === '预览') {
    previewRef.value.doParamsShow({
      post: row.value
    })
    adminStore.openPost(row.value, '预览')
  } else if (key === '编辑') {
    let r = router.resolve({
      path: '/pc/manage/edit',
      query: {
        id: row.value.id
      }
    })
    window.open(r.href, '_blank');
    adminStore.openPost(row.value, '编辑')
  } else if (key === '删除') {
    adminStore.removePostRecentItem(row.value.id)
  }
  showDropdown.value = false
}

const handleClear =()=>{
    adminStore.clearUserPostRecentList()
}
</script>

<style scoped>

</style>